<template>
  <div class="custom-wrapper">
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>
    <el-container class="app-container padding-content margin-content">
      <el-aside width="220px">
        <el-header>
          <div class="clearfix">
            <div class="fl">商品列表</div>
            <div class="fr">
              <el-button type="text" @click="showFlag = !showFlag">管理</el-button>
            </div>
          </div>
        </el-header>
        <el-menu class="my-menu">
          <el-menu-item
            v-for="item in list"
            :key="item.id"
            :index="''+item.id">
            <span slot="title" class="clearfix">
              <span class="fl">{{item.goodsName}}</span>
              <i class="el-icon-delete fr" v-show="showFlag" @click="handleDelete(item.id)"></i>
            </span>
          </el-menu-item>
        </el-menu>
        <el-footer>
          <el-button type="text" icon="el-icon-plus" @click="handleAdd">增加商品</el-button>
        </el-footer>
      </el-aside>
      <el-main>
        <main-content iframe-url="http://www.baidu.com"></main-content>
      </el-main>
    </el-container>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh="_findGoodsList"></add-or-update>
  </div>
</template>

<script>
  // api
  import { findGoodsList, delBatch } from '@/api/dataAnalysis'
  // components
  import MainContent from '@/components/MainContent'
  import AddOrUpdate from './components/add-or-update'

  export default {
    name: 'goodsAnalysis',
    data() {
      return {
        list: [],
        addOrUpdateVisible: false,
        showFlag: false
      }
    },
    created() {
      this._findGoodsList()
    },
    methods: {
      _findGoodsList() {
        findGoodsList().then((res) => {
          this.list = res.data.data
        })
      },
      handleAdd() {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init()
        })
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
          delBatch({ ids: id }).then(res => {
            this._findGoodsList()
            this.$message({ showClose: true, type: 'success', message: '删除成功!' })
          })
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消删除' });
        })
      }
    },
    components: {
      MainContent,
      AddOrUpdate
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">
  .custom-wrapper {

    .el-aside {
      position: relative;

      .my-menu {
        .el-icon-delete {
          line-height: 56px;
          font-size: 14px;
        }
      }
    }

    .el-header, .el-footer {
      background-color: #fff;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-header {
      border-bottom: 1px solid #e6e6e6;
    }

    .el-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      border-top: 1px solid #e6e6e6;
    }

    .el-menu {
      border-right: 0;
    }
  }
</style>
